<template>
  <Row class="iot-wrapper">
    <Col class="iot-wrapper-table" span="24">
    <Table :data="tableData" :columns="columns" border :loading="loading">
    </Table>
    </Col>
    <Col class="panel page-panel cf" style="margin-top:10px;">
    <!-- <Page :total="pageInfo.total" show-total :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging"
      :page-size="20"></Page> -->
    </Col>
    <Modal v-model="visible" title="产品详情" footer-hide class-name="iot-list-model">
      <p><span>产品名称：</span>{{selectRow.productName}}</p>
      <p><span>productKey：</span>{{selectRow.productKey}}</p>
      <p><span>类型：</span>{{selectRow.nodeType}}</p>
      <p><span>产品描述：</span>{{selectRow.nodeTypeText}}</p>
      <p><span>设备数量：</span>{{selectRow.deviceCount}}</p>
      <p><span>产品密钥：</span>{{selectRow.categoryKey}}</p>
      <p><span>联网方式：</span>{{selectRow.netType}}</p>
      <p><span>创建时间：</span>{{selectRow.gmtCreate}}</p>
    </Modal>
  </Row>
</template>
<script>
import { getIotProductList } from '@/api'
export default {
  mounted() {
    this.init()
  },
  data() {
    const vm = this
    return {
      tableData: [],
      loading: false,
      selectRow: {},
      visible: false,
      pageInfo: {
        page: 1,
        total: 0
      },
      columns: [
        {
          title: '产品名称',
          align: 'center',
          key: 'productName'
        },
        {
          title: 'productKey',
          align: 'center',
          key: 'productKey'
        },
        {
          title: '类型',
          align: 'center',
          key: 'nodeTypeText'
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'gmtCreate'
        },
        {
          title: '操作',
          align: 'center',
          render(h, params) {
            const { row } = params
            return h(
              'Button',
              {
                props: {
                  size: 'small'
                },
                on: {
                  click: e => {
                    vm.selectRow = row
                    vm.visible = true
                  }
                }
              },
              '查看'
            )
          }
        }
      ]
    }
  },
  methods: {
    async init() {
      this.loading = true
      const params = {
        page: this.pageInfo.page,
        size: 20
      }
      const { code, data } = await getIotProductList(params)
      console.log(data)
      if (code === 200) {
        this.tableData = data

        // const { list, total } = data
        // this.tableData = list
        // this.pageInfo.total = total
        this.loading = false
        return false
      }
      this.loading = false
      this.tableData = []
      this.pageInfo.total = 0
    },

    async switchThePaging(index) {
      this.pageInfo.page = index
      await this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.iot-wrapper {
  background: #fff;
  &-table {
    box-sizing: border-box;
    padding: 10px;
  }
}
</style>
